<template>
  <div class="editalerttype">
    <h3>编辑类型</h3>
   
    <el-form :model="form" label-width="120px">
              <el-form-item label=" 类型名称：">
              <el-input class="type" v-model="form.alerttype" />
              </el-form-item>
              <el-form-item>
              <el-button type="primary" @click="onSubmit(form)">创建</el-button>
              <!-- <el-button @click="handle">取消</el-button> -->
              <el-button text @click="dialogCkeakVisible = true">取消创建</el-button>
              <el-dialog v-model="dialogCkeakVisible" 
                    title="取消创建">
                    <h3>确认取消按钮并返回通知类型管理页面</h3>
                    <!-- 确认取消按钮 -->
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogCkeakVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogCkeakVisible = false , router.push('/index/family-schoolInteraction/alerttype')">
                        确定
                        </el-button>
                    </span>
                    </template>
                </el-dialog>
              </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {alertliststore} from '../stores/counterzsq'
import { useRouter } from 'vue-router'
import { onMounted, ref ,reactive,h} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

let $store = alertliststore();
// 创建内容
const form = reactive({
    id:$store.alertlist.length+1,
    alerttype: '',//通知标题
    property: '自定义',//通知属性
    statu: '启用',//状态
})

var router = useRouter()
// 点击创建按钮
const onSubmit = (row) => {
    if(form.alerttype != ''){
    // 发送请求将内容插入列表中
    $store.alertadd(row)
    alert('添加成功！')
    // 点击发布通知按钮就会跳转至类型列表界面
    router.push('/index/family-schoolInteraction/alerttype');
    }else{
        alert('请填入要发布的内容信息！')
    }
}

var router = useRouter()


const dialogCkeakVisible = ref(false)
</script >

<style scoped>
.editalerttype{
    padding: 30px  200px;
}

h3{
    padding-left: 40px;
    margin-bottom: 60px;
}

.el-form-item{
    margin-bottom: 60px;
}

.el-button{
    padding: 20px 43px;
    margin-right: 15px;
}
</style>